<template>
    <div>
        <!-- 搜索区域 -->
        <el-row type="flex" justify="space-around">
            <el-col :span="6">
                <el-input class="w-50 m-2" placeholder="请输入搜索关键词" prefix-icon="el-icon-search" size="medium">
                    <el-button type="info" size="medium" slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </el-col>
            <el-col :span="11">
            </el-col>
            <el-col :span="7">
                <el-button type="primary" size="small" @click="buffer.formBuffer = true">添加</el-button>
            </el-col>
        </el-row>
        <!-- 数据列表区域 -->
        <list-comp :menuList="menuList" :cellStyle="cellStyle" @edit="editMenu" @remove="removeMenu"></list-comp>
        <!-- 添加区域 | 编辑区域 -->
        <form-comp ref="formMenu" :menuList="menuList" :buffer="buffer" @channel="getMenuList"></form-comp>
    </div>
</template>

<script>
// 1.引入列表和添加/编辑表单组件
import listComp from "./components/list"
import formComp from "./components/form"
export default {
    components: {
        listComp,
        formComp
    },
    data() {
        return {
            menuList: [],//所有的菜单列表数据
            // 控制表单弹起
            buffer: {
                formBuffer: false
            },
            cellStyle: { background: '#FF6040', color: 'white', height: '50px' }
        };
    },
    mounted() {
        // 获取所有的菜单数据
        this.getMenuList()
    },
    methods: {
        // 获取所有的菜单数据
        getMenuList() {
            this.$api.reqGetMenu({ istree: true })
                .then(res => {
                    // console.log('数据是：', res)
                    this.menuList = res
                })
                .catch(err => console.log(err))
        },
        // 编辑菜单数据
        editMenu(info) {
            // 1.解构获取待修改数据的下标和内容
            let { index, row } = info
            // 2.将待修改的数据赋值给表单 delete()删除对象中的某些属性  object.defineProtype('存储描述符')
            delete (row.children);
            this.$refs.formMenu.form = JSON.parse(JSON.stringify(row))//使用注意事项
            // 3.弹起表单
            this.buffer.formBuffer = true
        },
        // 删除菜单数据
        removeMenu(info) {
            // 1.解构获取待修改数据的下标和内容
            let { row, index } = info
            // 2.检测该数据师傅可以直接被删除
            if (row.children && row.children.length > 0) {
                this.$alert('请先删除孩子数据！', {
                    confirmButtonText: '确定'
                });
            } else {
                // 2.询问用户是否执行删除操作
                this.$confirm('是否删除啊?', '温馨提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    //3.数据库（先）  页面节点（后）  async await无法捕获错误信息 
                    try {
                        let res = await this.$api.reqRemoveMenu({ id: row.id })
                        console.log('返回结果：', res)
                        this.menuList = res
                    } catch (error) {
                        console.log('错误异常捕获：', error)
                    }
                }).catch(() => { });
            }
        }
    }
};
</script>

<style  lang="less" scoped>
.el-row {
    margin: 20px 0;
}
</style>
